<!DOCTYPE html>
<!-- suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<base href="/"/>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" >
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-7 col-md-offset-8">
            <button type="button" class="btn btn-primary" id="to_add">添加</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered">
                <tr>
                    <td>ID</td>
                    <td>商品类型</td>
                    <td>商品名称</td>
                    <td>商品价格</td>
                    <td>商品图片</td>
                    <td>商品卖点</td>
                    <td>操作</td>
                </tr>
                <tr th:each="pp : ${list.list}">
                    <td th:text="${pp.id}">人肉</td>
                    <td th:text="${pp.typeName}">绕弯儿翁</td>
                    <td th:text="${pp.name}">我认为二</td>
                    <td th:text="${pp.price}">王蓉蓉</td>
                    <td><img src="#" th:src="${pp.image}" th:title="${pp.image}"></td>
                    <td th:text="${pp.salePoint}">我认为若翁</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm update" th:id="${pp.id}">修改</button>
                        <button type="button" class="btn btn-danger btn-sm delete" th:id="${pp.id}">删除</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">当前第<span th:text="${list.pageNum}"></span>页,
            共<span th:text="${list.total}"></span>条记录,共<span th:text="${list.pages}"></span>页</div>
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous" th:href="|product/page/${list.prePage==0?1:list.prePage}/${list.pageSize}|">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <!--<li class="active"><a href="#">1</a></li>-->
                    <li th:each="num : ${list.navigatepageNums}" th:class="${num == list.pageNum ? 'active' : ''}">
                        <a href="#" th:href="|product/page/${num}/${list.pageSize}|" th:text="${num}">2</a>
                    </li>

                    <li>
                        <a href="#" aria-label="Next" th:href="|product/page/${list.nextPage==0?1:list.nextPage}/${list.pageSize}|">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<!--添加弹窗页面-->
<div class="modal fade" tabindex="-1" role="dialog" id="addProduct">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加页面</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addForm" action="product/add">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="tProduct.name" id="name" placeholder="输入名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="price" class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="tProduct.price" id="price" placeholder="输入价格">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="salePrice" class="col-sm-2 control-label">预售价格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="tProduct.salePrice" id="salePrice" placeholder="输入预售价格">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="salePoint" class="col-sm-2 control-label">产品卖点</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="tProduct.salePoint" id="salePoint" placeholder="输入产品卖点">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="typeName" class="col-sm-2 control-label">商品类型</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="typeName" name="tProduct.typeName" placeholder="输入商品类型">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="image" class="col-sm-2 control-label">商品图片</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="image" name="tProduct.image" placeholder="输入商品图片">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品描述</label>
                        <div class="col-sm-10">
                            <div  id="editor"></div>
                            <!--<input type="text" class="form-control" id="desc" placeholder="输入商品描述">-->
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
<script>
    $(function () {
        $("#to_add").click(function () {
            $('#addProduct').modal({
                backdrop:false
            })
        });
        $("#add").click(function () {
            $("#addForm").submit();
        });
        $(".update").click(function () {
            alert($(this).attr("id"));
        });
        $(".delete").click(function () {
            alert($(this).attr("id"))
        });

        var E = window.wangEditor;
        var editor = new E('#editor');
        // 自定义菜单配置
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            //'italic',  // 斜体
            //'underline',  // 下划线
            //'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            //'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            //'quote',  // 引用
            //'emoticon',  // 表情
            'image',  // 插入图片
            //'table',  // 表格
            //'video',  // 插入视频
            //'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ];
        // 配置服务器端地址
        editor.customConfig.uploadImgServer = '/upload';
        editor.create()
    })
</script>
</body>
</html>